<template>

    <div class="tab-bar-item" @click="topage">
<!--      使用插槽，被调用时，会全部调换，若要添加属性，用div包裹-->
      <div v-if="isshow"><slot name="pic"></slot></div>
      <div v-else><slot name="pic-active"></slot></div>
      <div :class="{active:!isshow}"><slot name="text"></slot></div>

  </div>

</template>

<script>
export default {
  name: "tabbar-item",
  props:{
    path:String
  },
  data(){
    return {

    }

  },
  computed:{
    isshow(){
      return this.$route.path.indexOf(this.path)==-1
    }
  },
  methods:{
    topage(){
      this.$router.replace(this.path)
    }
  }
}
</script>

<style >
.active {
  color: red;
}
.tab-bar-item {
  /* flex：home 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容*/
  flex:1;
  text-align: center;
  height: 49px;
}
.tab-bar-item img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
</style>
